<template>
	<view>
		<u-navbar title="课程修改" :safeAreaInsetTop="true" :autoBack="true">
			<view class="u-nav-slot" slot="right">
				<button v-if="val" class="submit">保存</button>
				<button v-else class="un_submit">保存</button>
			</view>
		</u-navbar>
		<view :style="{paddingTop:customBar+'px'}"></view>
		<view class="course">
			<view class="course_label">
				<text>课程类型</text>
				<text class="red">*</text>
			</view>
			<view class="flex align-c course_font" @click="open">
				<view v-if="typeIndex||typeIndex===0" class="f1">{{ typeList[typeIndex].name }}</view>
				<text v-else class="f1 p-c">请选择</text>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>课程名称</text>
				<text class="red">*</text>
			</view>
			<input type="text" class="course_font" placeholder="请输入课程名称" placeholder-class="p-c">
		</view>
		
		<view class="course" v-if="type == 2">
			<view class="course_label">
				<text>课程分类</text>
				<text class="red">*</text>
			</view>
			<view class="flex align-c course_font">
				<view v-if="false" class="f1"></view>
				<text v-else class="f1 p-c">请选择分类</text>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>店铺位置</text>
				<text class="red">*</text>
			</view>
			<input type="text" class="course_font" placeholder="请输入店铺位置" placeholder-class="p-c">
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>时间</text>
				<text class="red">*</text>
			</view>
			<view class="flex align-c course_font">
				<text class="f1 p-c">请选择</text>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
			</view>
		</view>
		
		<view class="course" v-if="type == 2">
			<view class="course_label">
				<text>价格</text>
				<text class="red">*</text>
			</view>
			<view class="flex align-c course_font">
				<input type="text" class="f1 course_input" placeholder="请输入价格" placeholder-class="p-c">
				<view class="p-c">单位/节</view>
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">课程封面视频</view>
			<view class="grid">
				<view class="upload_img" v-for="(v,i) in videoList" :key="i">
					<image src="/static/home/del-img.png" class="close_img" mode="aspectFill" />
					<image src="/static/home/upload_img.png" mode="aspectFill" class="upload_img" />
				</view>
				<image src="/static/home/upload_img.png" mode="aspectFill" class="upload_img" />
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>课程封面图</text>
				<text class="red">*</text>
			</view>
			<view class="grid">
				<view class="upload_img" v-for="(v,i) in imgList" :key="i">
					<image src="/static/home/del-img.png" class="close_img" mode="aspectFill" />
					<image src="/static/home/upload_img.png" mode="aspectFill" class="upload_img" />
				</view>
				<image src="/static/home/upload_img.png" mode="aspectFill" class="upload_img" />
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>课程详情图</text>
				<text class="red">*</text>
			</view>
			<view class="grid">
				<view class="upload_img" v-for="(v,i) in detailList" :key="i">
					<image src="/static/home/del-img.png" class="close_img" mode="aspectFill" />
					<image src="/static/home/upload_img.png" mode="aspectFill" class="upload_img" />
				</view>
				<image src="/static/home/upload_img.png" mode="aspectFill" class="upload_img" />
			</view>
		</view>
		
		<view class="course" >
			<view class="course_label">
				<text>内容详情</text>
				<text class="red">*</text>
			</view>
			<textarea class="course_textarea" placeholder="请输入课程内容详情" placeholder-class="p-c"></textarea>
		</view>
	
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view class="item_box">
				<view class="item" v-for="(item,index) in typeList" :key="index" @click="checkType(item,index)">{{ item.name }}</view>
				<view class="item_red" @click="close">取消</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				customBar: 0,
				val: '',
				id: '',
				typeList: [
					{
						name: '公开课',
						type: 1
					},
					{
						name: '私教课',
						type: 2
					}
				],
				typeIndex: '',
				imgList: [],
				videoList: [],
				detailList: [],
				show: false,
				type: '',
			}
		},
		onLoad(e) {
			this.getSystemInfo();
			this.id = e.id;
		},
		methods: {
			getSystemInfo() {
				uni.getSystemInfo({
					success: (e) => {
						this.customBar = e.statusBarHeight + 44;
					}
				})
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			checkType(v,i) {
				this.typeIndex = i;
				this.type = v.type;
				this.show = false;
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFF;
		padding-bottom: 40rpx;
	}
</style>

<style lang="scss" scoped>
	.submit,.un_submit{
		margin: 0;
		padding: 0;
		width: 93rpx;
		height: 47rpx;
		background: #F17816;
		border-radius: 6rpx;
		font-size: 24rpx;
		color: #FFF;
		text-align: center;
		line-height: 47rpx;
		
	}
	.un_submit::after {
		border: none;
	}
	.un_submit {
		background: #F5F5F5;
		color: #B3B3B3;
	}
	.course {
		padding: 0 47rpx;
		margin-bottom: 40rpx;
		&_label {
			font-size: 29rpx;
			font-family: PingFang SC Bold;
			margin-bottom: 30rpx;
		}
		.into {
			width: 11rpx;
			height: 19rpx;
		}
		&_font {
			font-size: 27rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}
		&_input {
			font-size: 27rpx;
		}
		
		.grid {
			display: grid;
			grid-template-columns: 146rpx 146rpx 146rpx 146rpx;
			.upload_img {
				width: 133rpx;
				height: 133rpx;
				margin-bottom: 16rpx;
				position: relative;
				.close_img {
					width: 23rpx;
					height: 23rpx;
					position: absolute;
					right: 7rpx;
					top: 7rpx;
				}
			}
		}
		&_textarea {
			padding: 22rpx;
			font-size: 27rpx;
			background-color: #F5F5F5;
		}
	}
</style>
